<template>
  <div>
    <van-nav-bar title="发布房源" left-arrow @click-left="backFn" />
    <div class="Main">
      <div class="title">房源信息</div>
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="小区名称"
        placeholder="请输入小区名称"
        @click="this.$router.push('/search')"
      />
      <van-field
        v-model="fieldValue"
        readonly
        label="租金"
        placeholder="请输入租金/月"
      >
        <template #extra>
          <span>￥/月</span>
        </template>
      </van-field>

      <van-field
        v-model="fieldValue"
        readonly
        label="建筑面积"
        placeholder="请输入建筑面积"
      >
        <template #extra>
          <span>m2</span>
        </template>
      </van-field>
      <van-field
        v-model="value"
        is-link
        label="户型"
        placeholder="请选择"
        input-align="right"
      />
      <van-field
        v-model="value"
        is-link
        label="所在楼层"
        placeholder="请选择"
        input-align="right"
      />
      <van-field
        v-model="value"
        is-link
        label="朝向"
        placeholder="请选择"
        input-align="right"
      />
 <div>
          <div class="title">房屋标题</div>
          <van-field
          class='houseTitle'
            v-model="fieldValue"
            rows="1"
            autosize
            type="textarea"
            placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
          />
        </div>
<div>
  <div class='houseimg'>房屋图像 <hr> </div>
<van-uploader :after-read="afterRead" />
</div>
<div>
<div>房屋配置 <hr> </div>
<div class='housepeizhi'>
 <div
            class="item"
            v-for="(item, index) in iconList"
            :key="index"
          >
            <div class="icon">
              <i :class="`iconfont icon-${item}`"></i>
            </div>
            <div class="name">{{ index }}</div>
          </div>
</div>
</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fieldValue: '',
      iconList: {
        衣柜: 'yigui-hui',
        洗衣机: 'xiyiji',
        空调: 'kongdiao',
        天然气: 'tianranqi-01',
        冰箱: 'bingxiang',
        暖气: 'nuanqi-',
        电视: 'dianshiji',
        热水器: 'linyu',
        宽带: 'wifi',
        沙发: 'shafa'
      }
    }
  },
  methods: {
    backFn () {
      this.$router.push('/FirstPage')
    }
  }
}
</script>

<style lang="less">
.van-nav-bar {
  background-color: #21b97a;
}
.van-nav-bar__title {
  margin: 0 auto;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
}
.Main {
  position: absolute;
  margin-top: 50px;
  .title {
    color: #21b97a;
    height: 30px;
    border-bottom: 1px solid #ddd;
    line-height: 30px;
  }
}
.van-cell {
  height: 15.66667vw;
  font-size: 4.8vw;
}
.housepeizhi{
  // border:2px,solid,#c0c0c0;
  height: 100px;
}
</style>
